<!--
 * @Author: yanjikun
 * @Date: 2022-04-28 15:26:33
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-06-06 15:36:24
 * @Description: file content
-->
<script lang="tsx">
  import { getSlot } from '@/hooks/helper/tsxHelper'
  import { isArray, isString } from '@/utils/is'
  import { InfoCircleOutlined } from '@ant-design/icons-vue'
  import { Tooltip } from 'ant-design-vue'
  import { computed, CSSProperties, defineComponent, unref } from 'vue'
  import { basicHelpProps } from './basic-help'
  export default defineComponent({
    name: 'BasicHelp',
    components: {
      Tooltip,
    },
    props: basicHelpProps,
    setup(props, { slots }) {
      const getTooltipStyle = computed(
        (): CSSProperties => ({
          color: props.color,
          fontSize: props.fontSize,
        }),
      )
      const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }))

      const renderTitle = () => {
        const textList = props.text
        if (isString(textList)) {
          return <p>{textList}</p>
        }
        if (isArray(textList)) {
          return textList.map((text, index) => {
            return (
              <p key={text}>
                <>
                  {props.showIndex ? `${index + 1}.` : ''}
                  {text}
                </>
              </p>
            )
          })
        }
        return null
      }
      return () => {
        return (
          <Tooltip
            overlayClassName="basic-help__wrap"
            title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
            autoAdjustOverflow={true}
            overlayStyle={unref(getOverlayStyle)}
            placement={props.placement}
          >
            <span class="basic-help">
              {getSlot(slots) ?? <InfoCircleOutlined class="cursor-pointer" />}
            </span>
          </Tooltip>
        )
      }
    },
  })
</script>

<style scoped lang="less">
  .basic-help {
    @apply cursor-pointer ml-8px;
  }
</style>
